<route lang="json5">
	{
	needLogin: true,
	style: {
	navigationStyle: 'default',
	navigationBarTitleText: '个人信息',
	},
	}
</route>

<script setup>
	import {
		useUserStore
	} from '@/store'
	import {
		getEvnBaseUrl
	} from '@/utils'
	import {
		ref
	} from 'vue'
	import {
		useToast
	} from 'wot-design-uni'
	import {
		teacherDetailsApi
	} from '@/service/my'

	defineOptions({
		name: 'Home',
	})

	const state = reactive({
		tabbar: 1,
	})
	// 用户信息
	const userStore = useUserStore()

	const teacherInfo = ref()

	// 教师个人信息
	const getTeacherDetails = async () => {
		const res = await teacherDetailsApi(userStore.userInfo.userId)
		if (res?.code === 200) {
			teacherInfo.value = res?.data
		} else {
			console.error('获取教师个人信息失败:', res?.msg)
		}
	}

	onLoad(() => {
		console.log('进入我的')
		getTeacherDetails()
	})
</script>

<template>
	<view class="main_container">
		<view class="avatar_bg_container">
			<view class="info_container">
				<view class="avatar_container">
					<wd-img :width="115" :height="115" :enable-preview="true" round :src="teacherInfo.headshot
                  ? teacherInfo.headshot
                  : '/static/images/comment/default_user.png'" />
				</view>
				<wd-text :text="teacherInfo?.teacherName" bold style="margin-left: 90rpx" color="#3B3B3B" size="18px"/>
			</view>

			<view class="avatar_bg"/>
		</view>

		<wd-cell-group border>
			<wd-cell title="联系电话" :value="teacherInfo?.phonenumber" />
			<wd-cell title="所属学校" :value="userStore?.userInfo?.schoolName" />
			<!-- <wd-cell title="所属院系" :value="userStore?.userInfo?.sex" required /> -->
			<wd-cell title="邮箱" :value="userStore?.userInfo?.email" />
			<wd-cell title="证书编号" :value="teacherInfo?.certificateNo" />
		</wd-cell-group>

		<view style="display: flex; align-items: center; justify-content: center">
			<wd-img custom-class="certification_container" :src="
          teacherInfo?.certificatePic
            ? teacherInfo?.certificatePic
            : '/static/images/my/certificate_default_icon.png'
        " :enable-preview="true" />
		</view>
	</view>
</template>

<style scoped>
	.main_container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: #ffffff;
	}

	.avatar_bg_container {
		position: relative;
		width: 100%;
		height: 320rpx;
		margin-top: 50rpx;
	}

	.info_container {
		position: absolute;
		z-index: 2;
		display: flex;
		align-items: center;
		margin-left: 75rpx;
	}

	.avatar_container {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		background-color: white;
		border-radius: 50%;
	}

	.avatar_bg {
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 200rpx;
		margin-top: 95rpx;
		background-image: url('@/static/images/my/avatar_bg.png');
		background-repeat: no-repeat;
		background-position: top left;
		background-size: 100% 100%;
	}

	.avatar_img {
		width: 75rpx;
		height: 75rpx;
		margin-top: 25rpx;
		border-radius: 40rpx;
	}

	.font_black_12 {
		font-size: 12px;
		color: black;
	}

	.font_grey_12 {
		font-size: 12px;
		color: darkgrey;
	}

	.card_container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 300rpx;
	}

	.bottom_btn {
		width: 90%;
	}

	.certification_container {
		align-items: center;
		justify-content: center;
		width: 90%;
		height: 400rpx;
	}
</style>